<template>
  <div class="mod-demo-ueditor">
    <el-alert
      title="提示："
      type="warning"
      :closable="false">
      <div>
        <p class="el-alert__description">
          1.百度富文本是管理后台一个核心的功能，但同时又是一个有很多坑的地方, 曾经我花了三个晚上的时间终于把百度富文本的坑都给填满了,大家在使用过程中若是有问题可随时私聊我
        </p>
      </div>
    </el-alert>
    <p><el-button @click="getDemoEditorContent" type="primary">获取内容</el-button></p>
    <script id="demoEditor" class="ueditor-box" type="text/plain">hello world!</script>



    <el-dialog
      title="内容"
      :visible.sync="dialogVisible"
      :append-to-body="true">
      {{ demoEditorContent }}
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import ueditor from 'ueditor'
export default {
  name: 'ueditor',
  data () {
    return {
      dialogVisible: false,
      demoEditor: null,
      demoEditorContent: '',
      config: {}
    }
  },
  mounted () {
    let that = this
    ueditor.delEditor('demoEditor') // 解决编辑器显示不出来，刷新一下就正常显示的问题
    that.demoEditor = ueditor.getEditor('demoEditor', that.config) // 初始化富文本编辑器
    that.demoEditor.offsetWidth = '100'

    that.demoEditor.addListener('ready', () => {
      that.demoEditor.setShow(true)
    })
  },

  methods: {
    getDemoEditorContent () {
      this.dialogVisible = true
      this.demoEditorContent = this.demoEditor.getContent()
    }
  }
}
</script>

<style lang="scss">

  .edui-default .edui-editor-toolbarbox {
    position: relative !important;
  }
  .mod-demo-ueditor {
    position: relative;
    z-index: 510;
    > .el-alert {
      margin-bottom: 10px;
    }
  }
</style>
